import { dom, _empty, _append, _query, _layout, _addClassName, _queryAll, _removeClassName, _accordion } from './dom.js'
import { _playBar } from './playBar.js'
import { plainTreeMenu } from '../utils/index.js'
import { _tree } from './tree.js'
import { renderContent } from './renderContent.js'
import { _form } from './form.js'
import { _inspector } from './inspector.js'
import {
    updateRoute,
    getRoute
} from './route.js'


export const _nav = (treeData, config = {}) => {
    let { target, root = document.body, activeName } = config
    let list = plainTreeMenu(treeData)
    let currentItem = ""
    let handleNavItemClick = (t) => {
        let tree = _tree(t.children, renderItem)
        let navtree = dom.div([tree], {
            class: 'navtree',
            role: t.name
        })
        _accordion(navtree, `.navtree[role=${t.name}]`, ".aside", root)
    }


    // 解析目录item
    const parseTreeItem = (t) => {
        return new Promise((resolve) => {
            if (t.content) {
                return resolve(t)
            }
            else if (t.url) {
                if (/^canvas.*?/.test(t.url)) {
                    import(`../data/canvas/index.js`).then(res => {
                        return resolve({
                            ...t,
                            content: res[t.url],
                        })
                    })
                }

                else if (/^svg.*?/.test(t.url)) {
                    import(`../data/svg/index.js`).then(res => {
                        return resolve({
                            ...t,
                            content: res[t.url],
                        })
                    })
                } else if (/^(webgl|gl).*?/.test(t.url)) {
                    import(`../data/webgl/index.js`).then(res => {
                        return resolve({
                            ...t,
                            content: res[t.url],
                        })
                    })
                } else {
                    console.log(t.url)
                    import(`../data/html.js`).then(res => {
                        return resolve({
                            ...t,
                            content: res[t.url],
                        })
                    })
                }

            }
        })

    }


    const handleClick = (t) => {
        parseTreeItem(t).then(t => {
            // handleClick(res)
            let { content, isHtml } = renderContent(t)
            let panel = dom.div(content, {
                name: t.name,
                role: t.name,
                class: 'panel',
                isHtml
            })
            currentItem = t
            _accordion(panel, `.panel[name=${t.name}]`, target, root)

            //   图形配置表单
            if (t.content && ['svg', 'canvas'].includes(t.contentType)) {
                let inspectorForm = _inspector(t)
                let container = _query(".main .inspector")
                _empty(container)
                _append(container, inspectorForm)
            }

            // 更新路由
            updateRoute(t)
        })


    }
    let handleTreeItemClick = (t, el) => {
        if (!t.content && !t.url) return
        let items = _queryAll(".tree-item")
        _removeClassName(items, "active")
        _addClassName(el, "active")
        handleClick(t)
    }

    let initNavRoot = (name) => {
        let item = list.find(t => t.name === name)
        if (item && item.contentType === 'svg') {
            let t = treeData.find(t => t.name === 'svg')
            handleNavItemClick(t)
            let el = _query(`.tree-item[role=${item.name}]`)
            handleTreeItemClick(item, el)
            setTimeout(() => {
                el.scrollIntoView()
            }, 100)

        }
    }


    let renderItem = (t) => {
        return dom.div(t.title, {
            class: (t.content || t.url) ? 'tree-item' : '',
            role: t.name
        }, (e) => {
            handleTreeItemClick(t, e.target)
        })
    }

    let render = (t) => {
        return dom.div(t.title, {
            class: 'nav-item'
        }, (e) => {
            handleNavItemClick(t)
        })
    }

    let nav = _tree(treeData, render, 0)

    let playBar = _playBar(list, (t) => {

        let items = _queryAll(".tree-item")
        _removeClassName(items, "active")
        let el = _query(`.tree-item[role=${t.name}]`, _query(".leftside"))
        _addClassName(el, "active")
        handleClick(t)
    })

    // 初始化路由
    let route = getRoute()
    if (route) {
        activeName = route

        initNavRoot(route)
    }

    return dom.div([nav, playBar], {
        class: "nav"
    })
}